<template>
    <div class="loginbody">
        <div class="logindata">
            <div class="logintext">
                <h2>欢迎进入 学生处分管理系统</h2>
            </div>
            <div class="formdata">
                <el-form>
                    <el-form-item>
                        <el-input v-model="form.loginName" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" clearable placeholder="请输入你的密码" show-password></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="tool">
                <div>
                    <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
                </div>
                <div><span class="shou" @click="openForgotPasswordDialog">忘记密码？</span></div>
            </div>
            <div class="butt">
                <el-button type="primary" @click.native.prevent="login('form')">登录</el-button>
                <el-button class="shou" @click="openRegisterDialog">注册</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="isRegisterDialogVisible" title="注册" width="400px" center append-to-body=true @close="resetRegisterForm">
            <el-form>
                <el-form-item>
                    <el-input v-model="registerForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="registerForm.token" placeholder="请输入注册令牌"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="registerForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
                    <div v-if="passwordMatchMessage" :style="{ color: passwordMatchColor }" class="password-match-message">
                        {{ passwordMatchMessage }}
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isRegisterDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="register">注册</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="isForgotPasswordDialogVisible" title="忘记密码" width="400px" center append-to-body=true @close="resetForgotPasswordForm">
            <el-form>
                <el-form-item>
                    <el-input v-model="forgotPasswordForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="forgotPasswordForm.token" placeholder="请输入注册令牌"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="forgotPasswordForm.newPassword" type="password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="forgotPasswordForm.confirmPassword" type="password" placeholder="确认新密码"></el-input>
                    <div v-if="forgotPasswordMatchMessage" :style="{ color: forgotPasswordMatchColor }" class="password-match-message">
                        {{ forgotPasswordMatchMessage }}
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isForgotPasswordDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="resetPassword">重置密码</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {userLogin, userRegister} from '../../api/user'

export default {
  name: 'login',
  data () {
    return {
      form: {
        password: '',
        loginName: ''
      },
      rememberMe: false,
      isRegisterDialogVisible: false,
      registerForm: {
        name: '',
        token: '',
        password: '',
        confirmPassword: ''
      },
      isForgotPasswordDialogVisible: false,
      forgotPasswordForm: {
        name: '',
        token: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  created () {
    this.loadRememberedCredentials()
  },
  computed: {
    passwordMatchMessage () {
      if (this.registerForm.password && this.registerForm.confirmPassword) {
        return this.registerForm.password === this.registerForm.confirmPassword
          ? '两次密码一致'
          : '两次密码不一致'
      }
      return ''
    },
    passwordMatchColor () {
      return this.registerForm.password === this.registerForm.confirmPassword ? 'green' : 'red'
    },
    forgotPasswordMatchMessage () {
      if (this.forgotPasswordForm.newPassword && this.forgotPasswordForm.confirmPassword) {
        return this.forgotPasswordForm.newPassword === this.forgotPasswordForm.confirmPassword
          ? '两次密码一致'
          : '两次密码不一致'
      }
      return ''
    },
    forgotPasswordMatchColor () {
      return this.forgotPasswordForm.newPassword === this.forgotPasswordForm.confirmPassword ? 'green' : 'red'
    }
  },
  methods: {
    login () {
      userLogin(this.form).then(res => {
        if (res.data != null && res.status) {
          this.$message({
            message: '恭喜你，登录成功',
            type: 'success'
          })
          this.$router.push({ path: '/main' })
          if (this.rememberMe) {
            this.saveCredentials()
          } else {
            this.clearCredentials()
          }
        } else {
          this.$message({
            message: '用户名或密码错误',
            type: 'warning'
          })
        }
        console.info(res)
      })
    },
    openRegisterDialog () {
      this.isRegisterDialogVisible = true
    },
    async register () {
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.$message({
          message: '两次输入的密码不一致',
          type: 'warning'
        })
        return
      }
      const json = {
        loginName: this.registerForm.name,
        token: this.registerForm.token,
        password: this.registerForm.password
      }
      console.log(json)
      try {
        const res = await userRegister(json)
        if (res.data != null && res.status) {
          this.$message({
            message: '恭喜你，注册成功',
            type: 'success'
          })
          this.isRegisterDialogVisible = false
        } else {
          this.$message({
            message: '错误',
            type: 'warning'
          })
        }
        console.info(res)
      } catch (error) {
        this.$message({
          message: '请求失败',
          type: 'error'
        })
        console.error(error)
      }
    },
    openForgotPasswordDialog () {
      this.isForgotPasswordDialogVisible = true
    },
    resetPassword () {
      if (this.forgotPasswordForm.newPassword !== this.forgotPasswordForm.confirmPassword) {
        this.$message({
          message: '两次输入的密码不一致',
          type: 'warning'
        })
        return
      }
      // 重置密码逻辑
      this.isForgotPasswordDialogVisible = false
      this.$message({
        message: '密码重置成功',
        type: 'success'
      })
    },
    resetRegisterForm () {
      this.registerForm = {
        name: '',
        token: '',
        password: '',
        confirmPassword: ''
      }
    },
    resetForgotPasswordForm () {
      this.forgotPasswordForm = {
        name: '',
        token: '',
        newPassword: '',
        confirmPassword: ''
      }
    },
    saveCredentials () {
      localStorage.setItem('loginName', this.form.loginName)
      localStorage.setItem('password', this.form.password)
    },
    loadRememberedCredentials () {
      const loginName = localStorage.getItem('loginName')
      const password = localStorage.getItem('password')
      if (loginName && password) {
        this.form.loginName = loginName
        this.form.password = password
        this.rememberMe = true
      }
    },
    clearCredentials () {
      localStorage.removeItem('loginName')
      localStorage.removeItem('password')
    }
  }
}
</script>

<style scoped>
.loginbody {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background-image: url("../../assets/images/login/login.jpg");
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
    padding-top: 150px;
}

.logindata {
    margin-top: 250px;
    text-align: center;
}

.logintext {
    margin-bottom: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

.logindata {
    width: 400px;
    height: 300px;
    transform: translate(-50%);
    margin-left: 50%;
}

.tool {
    display: flex;
    justify-content: space-between;
    color: #606266;
}

.butt {
    margin-top: 10px;
    text-align: center;
}

.shou {
    cursor: pointer;
    color: #606266;
}

.dialog-footer {
    text-align: right;
}

.password-match-message {
    margin-top: 5px;
    font-size: 12px;
}
</style>
